
@keyframes aim_wing {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes aim_count {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes aim_move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(120vh);
    transform: translateY(120vh);
  }
}
@keyframes aim_point {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

.red-packet-container{
  height: 100%;
  background-size: cover;
  background-position: center center;
  position: relative;
  box-sizing: border-box;

  .back-btn{
    width: 280rpx;
    display: block;
  }
  .rule-btn{
    width: 180rpx;
    right: 0;
    position: absolute;
  }

  .modal{
    color: #FFCE5E;
    font-size: 48rpx;
    text-align: center;

    width: 390rpx;
    height: 484rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    position: absolute;
    background-size: cover;

    .back-btn{
      margin: 20rpx auto 0;
    }

    .flex-container{
      @include flex(column);
      @include center;

      width: 390rpx;
      height: 484rpx;

      .text{
        color: #fff;
        font-size: 32rpx;
        margin-top: 40rpx;
      }
    }
    
  }
  .time-modal{
    width: 570rpx;
    height: 770rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    background-size: cover;

    .time{
      color: #fff;
      font-size: 72rpx;
      font-weight: bold;
      margin-top: 220rpx;
      text-align: center;
    }

    .back-btn{
      margin: 480rpx auto 0;
    }
  }
  .rule-modal{
    font-size: 24rpx;
    width: 580rpx;

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    .container{
      padding: 36rpx 24rpx;
      background: #fff;
      border-radius: 20rpx;

      .detail {
      }
    }
    .close-btn{
      width: 52rpx;
      margin: 40rpx auto 0;
      display: block;
    }

    .title{
      color: #000;
      font-size: 32rpx;
      line-height: 1;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .line{
      @include flex;
    }

    h3{
      color: #000;
      line-height: 1;
      font-weight: bold;
      margin-top: 36rpx;
      margin-bottom: 12rpx;
    }
  }
  .time-to-start-modal{
    width: 600rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    position: absolute;

    .wing{
      width: 100%;
      height: 734rpx;
      -webkit-animation: aim_wing 1.8s linear infinite;
      animation: aim_wing 1.8s linear infinite;
    }
    .count-block{
      -webkit-animation: aim_count 2s linear infinite;
      animation: aim_count 2s linear infinite;

      left: 104rpx;
      bottom: 0;
      width: 394rpx;
      height: 478rpx;
      background-size: cover;
      position: absolute;

      .title{
        color: #FFCE5E;
        font-size: 48rpx;
        //font-weight: bold;
        text-align: center;
        padding-top: 240rpx;
      }

      .flex-container{
        color: #FFCE5E;
        font-size: 90rpx;
        margin-top: 16rpx;
        display: flex;
        justify-content: center;

        view{
          text-align: center;
          width: 80rpx;
          line-height: 100rpx;
          background:rgba(0,0,0,0.26);
          border-radius:16rpx;

          margin-right: 12rpx;

          &:last-child{
            margin-right: 0;
          }
        }
      }
    }

    .text{
      width: 100%;
      margin-top: 20px;
    }
  }

  .activity-data-block{
    @include flex;
    @include a-center;
    color: #FFCE5E;
    font-size: 36rpx;
    padding: 0 32rpx;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;

    .time-part{
      font-size: 44rpx;
      text-align: center;
      width: 180rpx;
      height: 180rpx;
      background: rgba(0, 0, 0, 0.4);
      border-bottom-left-radius: 45px;
      border-bottom-right-radius: 45px;
      margin-right: 24rpx;

      .title{
        color: #fff;
        font-size: 32rpx;
        padding: 24rpx 0 12rpx;
      }
    }
    .sub-item{
      @include sub-item;
    }
  }

  .result-modal{
    width: 580rpx;
    height: 612rpx;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    position: absolute;
    background-size: cover;
    .money{
      color: #FF3233;
      font-size: 120rpx;
      margin-top: 200rpx;
      margin-right: 36rpx;
      &::before{
        content: "¥";
        font-size: 60rpx;
      }
    }

    .btns{
      @include flex;
      width: 500rpx;
      margin: 92rpx auto;
      image{
        width: 250rpx;
        height: 112rpx;
      }
    }
    .back-btn{
      margin: 60rpx auto 0;
    }
  }

  .red-packets-block{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    &>view{
      position: absolute;
      animation: all 3s linear;
      top: -200rpx;
      z-index: 10;

      .packet{
        width: 196rpx;
        height: 216rpx;
        // background: url('../../assets/images/activity/red-packet/packet.png') no-repeat center;
        background-size: cover;
      }
      &.move {
        -webkit-animation: aim_move 5s linear 1 forwards;
        animation: aim_move 5s linear 1 forwards;
      }
    }
  }
  .number-point{
    color: #FFCE5E;
    font-size: 18px;
    -webkit-animation: aim_point 1s linear 1 forwards;
    animation: aim_point 1s linear 1 forwards;
    position: absolute;
  }
}